window.onload = async function() {
    const res = await get('/dashboard')

    const {
        data: {overview, year, salaryData, groupData, provinceData},
    } = res
    console.log('res:', res);
    // 渲染头部数据
    for (let key in overview) {
        document.querySelector('[name=' + key).innerHTML = overview[key];
    }
    // 调用
    renderYear(year);
    renderPieClass(salaryData);
    renderaClassSalary(groupData);
    initMapChart(provinceData)
    renderPieSix(salaryData);
    
    // 获取元素
    const btns = document.querySelector('#btns');
    // 绑定委托事件
    btns.addEventListener('click', function(e) {
        if(e.target.tagName === 'BUTTON') {

        }
        
    })
}

// 封装全年薪资图表
const renderYear = data => {
    const myChart = echarts.init(document.getElementById('line'))
    
    myChart.setOption({
        title: {
          text: '杭州黑马前端36期全年薪资走势',
          top: '4%',
          left: '3%',
        },  
        xAxis: {
          type: 'category',
          data: data.map(item => item.month),
          axisLine: {
            lineStyle: {
                type: 'dashed',
                color: '#333',
            },
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',  
            },
          },
          
        },
        series: [
          {
            data: data.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 6,
            },
            symbolSize: 10,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#499FEE",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(255,255,255,0.2)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)",
                  },
                ]),
              },
          },
        ],
        tooltip: {
          trigger: 'axis',  
        },
        color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#499FEE", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#5D75F0", // 100% 处的颜色
                },
              ],
            },
          ],
      })
}

// 封装班级薪资分布饼图
const renderPieClass = data => {
    
    const myChart = echarts.init(document.getElementById('salary'));
    
    myChart.setOption(
        {
            title: {
              text: '班级薪资分布',
              top: 15,
              left: 10,
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '80%',
              left: 'center'
            },
            series: [
              {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['50%', '64%'],
                center: ["50%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 400,
                  }
                },
                labelLine: {
                  show: false
                },
                data: data.map(item => {
                    return {
                        name: item.label,
                        value: item.b_count + item.g_count,
                    }
                })
              },
            ],
        },
    )
}

// 封装每组薪资柱状图
const renderaClassSalary = (data, num) => {
    const myChart = echarts.init(document.getElementById('lines'));

    myChart.setOption({
        xAxis: {
          grid: {
              left: 70,
              top: 30,
              right: 30,
              bottom: 50,
            },
          type: 'category',
          data: data[1].map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#333",
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: data[1].map((item) => item.hope_salary),
            type: 'bar'
          },
          {
            data: data[1].map((item) => item.salary),
            type: 'bar'
          },
        ],
        tooltip: {
            trigger: "item",
          },
        color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#34D39A", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(52,211,154,0.2)", // 100% 处的颜色
                },
              ],
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#499FEE", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(73,159,238,0.2)", // 100% 处的颜色
                },
              ],
            },
          ],
      })
}

// 封装籍贯分布图
const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
}

// 封装男女薪资分布饼图
const renderPieSix = data => {
    const myChart = echarts.init(document.getElementById('gender'));
    
    myChart.setOption({
        title: [
          {
          text: '男女薪资分布',
          left: '3%',
          top: '3%',
        },
        {
          text: "男生",
          left: "50%",
          top: "40%",
          textAlign: "center",
          textStyle: {
            fontSize: 12,
          },
        },
        {
          text: "女生",
          left: "50%",
          top: "90%",
          textAlign: "center",
          textStyle: {
            fontSize: 12,
          },
        },
      ],
      color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        tooltip: {
          trigger: 'item'
        },
        
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '30%'],
            center: ['50%', '25%'],
            data: data.map(item => {
                return {
                    name: item.label,
                    value: item.b_count,
                }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '30%'],
            center: ['50%', '75%'],
            data: data.map(item => {
                return {
                    name: item.label,
                    value: item.g_count,
                }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
          },
        ],
      });
}